<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>调整元素尺寸</title>

        <style type="text/css">
            .wrapper { width: 400px ; height: 200px ; border: 1px solid blue ; margin: 25px auto ; }
            .first { overflow: auto ; resize: horizontal ; /* 水平尺寸可调整 */ user-select: none ;  }
            .second { overflow: auto ; resize: vertical ; /* 垂直尺寸可调整 */}
            .third { overflow: auto ; resize: both ; /* 水平和垂直尺寸皆可调整 */ }
            /* resize : none 表示 水平和垂直尺寸 均不可调整 ( none 是 resize 的默认值 )*/
            .fourth>textarea { overflow: auto ; resize: none ; width: 80% ; height: 100px ; }
        </style>

    </head>

    <body>

        <div class="wrapper first">
            时维九月，序属三秋。
            潦水尽而寒潭清，烟光凝而暮山紫。
            俨骖騑于上路，访风景于崇阿；
            临帝子之长洲，得天人之旧馆。
            层峦耸翠，上出重霄；
            飞阁流丹，下临无地。
            鹤汀凫渚，穷岛屿之萦回；
            桂殿兰宫，即冈峦之体势。
        </div>

        <div class="wrapper second">
            时维九月，序属三秋。
            潦水尽而寒潭清，烟光凝而暮山紫。
            俨骖騑于上路，访风景于崇阿；
            临帝子之长洲，得天人之旧馆。
            层峦耸翠，上出重霄；
            飞阁流丹，下临无地。
            鹤汀凫渚，穷岛屿之萦回；
            桂殿兰宫，即冈峦之体势。
        </div>

        <div class="wrapper third">
            时维九月，序属三秋。
            潦水尽而寒潭清，烟光凝而暮山紫。
            俨骖騑于上路，访风景于崇阿；
            临帝子之长洲，得天人之旧馆。
            层峦耸翠，上出重霄；
            飞阁流丹，下临无地。
            鹤汀凫渚，穷岛屿之萦回；
            桂殿兰宫，即冈峦之体势。
        </div>

        <div class="wrapper fourth">
            <textarea>文本域中可以输入内容</textarea>
        </div>

    </body>

</html>